@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300&display=swap');
@import url('./dank-mono.css');

:root {
  --ifm-color-primary: rgb(82, 93, 220);
  --ifm-color-primary-dark: rgb(86, 98, 218);
  --ifm-color-primary-darker: rgb(71, 83, 220);
  --ifm-color-primary-darkest: rgb(40, 49, 142);
  --ifm-color-primary-light: rgba(82, 93, 220, 1);
  --ifm-color-primary-lighter: rgba(82, 93, 220, 0.5);
  --ifm-color-primary-lightest: rgba(82, 93, 220, 0.1);

  --ifm-font-family-base: 'Public Sans', system-ui, sans-serif;
  --ifm-font-family-monospace: 'dm', monospace;
}

.navbar {
  box-shadow: none;
}

article[itemprop='blogPost'] header > h1[itemprop='headline'] {
  font-size: 2.5em !important;
}

.theme-doc-sidebar-container {
  border-right: none !important;
}

.alert--info {
  --ifm-alert-border-color: rgba(82, 93, 220, 0.5);
  --ifm-code-background: rgba(82, 93, 220, 0.1);
  --ifm-tabs-color-active-border: rgba(82, 93, 220, 0.8);
  background-color: var(--ifm-color-primary-lightest);
  border-color: var(--ifm-color-primary);
  --ifm-link-color: rgba(82, 93, 220, 0.8);
}

.footer {
  background: var(--ifm-background-surface-color);
}
.markdown :not(button) a {
  color: var(--ifm-link-color);
  font-weight: bold;
  border-bottom: 2px solid transparent;
  transition: all var(--ifm-transition-fast)
    var(--ifm-transition-timing-default);
}

.markdown :not(button) a:hover {
  color: var(--ifm-link-hover-color);
  border-bottom: 2px solid var(--ifm-link-hover-color);
  text-decoration: none;
}

@media screen and (max-width: 996px) {
  :root {
    --ifm-font-size-base: 16px;
  }

  .hero .hero__title {
    font-size: 2.5rem;
  }
}

@media screen and (min-width: 997px) {
  :root {
    --ifm-font-size-base: 16px;
  }
}

.navbar__link {
  display: inline-block;
}

.navbar__link svg {
  display: none;
}

.header-github-link,
.header-discourse-link {
  content: '';
}
.header-github-link:before,
.header-discourse-link:before {
  content: '';
  display: flex;
  height: 24px;
  width: 24px;
}

.header-github-link:before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}
[data-theme='dark'] .header-github-link:before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

.header-discourse-link:before {
  background: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1_4)'%3E%3Cpath d='M12.0862 0C5.52466 0 0 5.31961 0 11.8835V24.1887L12.0839 24.1771C18.6454 24.1771 23.9674 18.6524 23.9674 12.0909C23.9674 5.52932 18.6408 0 12.0862 0Z' fill='%23231F20'/%3E%3Cpath d='M12.2027 4.59961C10.927 4.60036 9.67328 4.93236 8.56436 5.5631C7.45545 6.19385 6.52931 7.10172 5.87661 8.19786C5.2239 9.29399 4.86701 10.5408 4.84085 11.8163C4.81469 13.0918 5.12017 14.3522 5.72738 15.4742L4.39456 19.7616L9.18058 18.6804C10.1821 19.1316 11.2718 19.3531 12.37 19.3287C13.4681 19.3042 14.5469 19.0345 15.5274 18.5392C16.5078 18.0439 17.365 17.3355 18.0363 16.466C18.7075 15.5966 19.1758 14.588 19.4068 13.5141C19.6378 12.4402 19.6257 11.3283 19.3714 10.2597C19.1171 9.1911 18.627 8.19292 17.937 7.33826C17.2469 6.48359 16.3745 5.79408 15.3835 5.32022C14.3926 4.84636 13.3081 4.60014 12.2097 4.59961H12.2027Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1_4'%3E%3Crect width='24' height='24.233' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A")
    no-repeat;
}
[data-theme='dark'] .header-discourse-link:before {
  background: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1_4)'%3E%3Cpath d='M12.0862 0C5.52466 0 0 5.31961 0 11.8835V24.1887L12.0839 24.1771C18.6454 24.1771 23.9674 18.6524 23.9674 12.0909C23.9674 5.52932 18.6408 0 12.0862 0Z' fill='white'/%3E%3Cpath d='M12.2027 4.59961C10.927 4.60036 9.67328 4.93236 8.56436 5.5631C7.45545 6.19385 6.52931 7.10172 5.87661 8.19786C5.2239 9.29399 4.86701 10.5408 4.84085 11.8163C4.81469 13.0918 5.12017 14.3522 5.72738 15.4742L4.39456 19.7616L9.18058 18.6804C10.1821 19.1316 11.2718 19.3531 12.37 19.3287C13.4681 19.3042 14.5469 19.0345 15.5274 18.5392C16.5078 18.0439 17.365 17.3355 18.0363 16.466C18.7075 15.5966 19.1758 14.588 19.4068 13.5141C19.6378 12.4402 19.6257 11.3283 19.3714 10.2597C19.1171 9.1911 18.627 8.19292 17.937 7.33826C17.2469 6.48359 16.3745 5.79408 15.3835 5.32022C14.3926 4.84636 13.3081 4.60014 12.2097 4.59961H12.2027Z' fill='%23231F20'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1_4'%3E%3Crect width='24' height='24.233' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A")
    no-repeat;
}
